<template>
  <m-modal
    ref='modal'
    v-model="tab.modalVisible"
    :title="tab.graphNode.title"
    :showFooter='false'
    :left="tab.bounds.x"
    :top="tab.bounds.y"
    :width="tab.bounds.width"
    :min-width="150"
    :min-height="28"
    :height="tab.bounds.height"
    showSizer
    initSize='large'
    keep-alive
    class="v-graph-editor-modal"
    resizable
    @size-change="handleSizeChange"
    @cancel="handleCancel"
    @title-mouse-down="handleTitleMouseDown"
    
  >
    <span slot="title"  class="g-fs-14 " style="line-height: 28px" @contextmenu="handleContextMenu($event,tab)">
      {{ tab.graphNode.disabled ? '[只读]' : ''}}
      <img :src="tab.graphNode.iconPath" class="g-m-r-5 g-inline-block" style="width:16px;height:16px;"/>
      {{ tab.graphNode.title }}
    </span>
    <m-graph-editor
      v-if="tab.type === 'diagram'"
      ref="graph"
      :diagram-type="tab.diagramType"
      :diagramNode="tab.graphNode"
      :visible="tab.modalVisible"
    />

    <m-requeirement-ralation-map v-else-if="tab.type === 'relationView'" :visible="tab.modalVisible" :map-id="tab.id"/>
    <m-dependency-matrix v-else-if="tab.type === 'matrix'" :visible="tab.modalVisible" :table-id="tab.id"/>
    <m-requirement-table v-else-if="tab.type === 'table'" :visible="tab.modalVisible" :table-id="tab.id"/>
  </m-modal>
</template>
<script>
import { Portal } from 'src/components/common/Portal.vue';
import Modal from 'src/components/common/CustomModal';
import GraphEditor from 'src/pages/mxgraph/graphEditorCustom';
import DependencyMatrix from '../RequirementTable/DependencyMatrix';
import TraceDiagram from '../RequirementRelationMap/TraceDiagram';
import RequirementTable from '../RequirementTable/RequirementTable';
import { GraphTabUtil } from './GraphTabUtil';

const comp = {
  name: 'graph-editor-modal',
  components: {
    'm-modal': Modal,
    'm-graph-editor': GraphEditor,
    'm-requirement-table': RequirementTable,
    'm-dependency-matrix': DependencyMatrix,
    'm-requeirement-ralation-map': TraceDiagram,

  },
  props: {
    tab: Object,

  },
  data() {

    return {
      events: {
        'diagram-remove': this.handleRemoveDiagram, //// 判断删除的画布是不是自己，如果是自己则关闭自己
        'diagram-open': this.openDiagram,

      }

    };
  },
  mounted(){
    this.tab.modalVisible = true;
    this.$bus.onBatch(this.events);
  },
  beforeDestroy(){
    this.$bus.offBatch(this.events);

  },

  methods: {
    handleCancel(){
      this.tab.modalVisible = false;
      this.$emit('close');
      GraphTabUtil.removeDiagram(this.tab.graphNode.id);
      //// this.removeDiagram(this.tab.graphNode.id);
    },
    /**
     * 点击tab关闭按钮时的移除画布
     */
    removeDiagram(diagramId) {
      console.log('remove-----');
      let index = app.graphTabs.findIndex((tab) => tab.id === diagramId);
      if (index > -1) {
        app.graphTabs.splice(index, 1);
        if (app.ui.activeTabId === diagramId) {
          const preTab = app.graphTabs[index - 1];
          const firstTab = app.graphTabs[0];
          app.ui.activeTabId = (preTab || firstTab || {}).id;
        }
      }

    },
    handleRemoveDiagram({ id, ids }){
      if (id){
        if (id === this.tab.graphNode.id){
          this.handleCancel();
        }
      } else if (ids){
        if (ids.includes(this.tab.graphNode.id)){
          this.handleCancel();
        }

      }
        
    },
    handleTitleMouseDown(){
      GraphTabUtil.changeTab(this.tab.graphNode.id);
    },
    openDiagram({ id }){
      if (id === this.tab.id){
        GraphTabUtil.changeTab(this.tab.graphNode.id);
        this.$refs.modal.handleModalClick();
      }

    },
    handleSizeChange(size){
      this.tab.inModal = false;
      GraphTabUtil.changeTab(this.tab.graphNode.id);
      this.tab.modalVisible = false;
      this.$emit('close');

    }

  }
};
export default comp;
export const GraphEditorModal = new Portal(comp);
export const portal = GraphEditorModal;

</script>
<style lang="scss">
.v-graph-editor-modal {
  .v-graph-content {
    height: 100%;
    overflow: hidden;
    background: linear-gradient(180deg, #fbfdff 0%, #e6f6ff 100%, #cae4f3 100%, #abd7ef 100%);

    ._graph-out {
      height: calc(100% - 30px) !important;
    }

  }
}

</style>
